<template>
  <div style="display: flex;">
    <asideTabs :searchVocDetails="searchVocDetails" :vocId="vocId" :vocNext="vocNext" :path="path"></asideTabs>
    <div class="coking">
    <div class="coking-content">
      <div class="page-title">
        <P
          ><span style="color: rgba(0, 84, 190, 1);"
            ><span v-html="formatting(vocNext)"></span
            >{{ searchVocDetails }}</span
          >石油行业信息</P
        >
      </div>
      <div class="content" v-loading="loading"
    element-loading-text="数据加载中"
    element-loading-spinner="el-icon-loading"
    style="margin-bottom: 20px;">
        <el-table
          border
          :data="tableData"
          style="width: 100%"
          :highlight-current-row="true"
          :header-cell-style="{
            background: '#eef1f6',
            color: 'black',
          }"
          :cell-style="{ height: '35px', padding: '0' }"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <div class="expand-all">
                <div class="expand-title">非致癌健康信息</div>
                <div class="my-table">
                  <table width="1000">
                    <tr>
                      <th>RfCi(ug/m³)</th>
                      <th>来源</th>
                    </tr>
                    <tr
                      v-if="!props.row.healthList[0]"
                      :key="props.rowhealthList + '311'"
                    >
                      <td colspan="4">暂无数据</td>
                    </tr>
                    <tr
                      v-for="(content, i) in props.row.healthList"
                      :key="i + '213'"
                    >
                      <td>
                        <span>{{ content.rfci }}</span>
                      </td>
                      <td>
                        <span>{{ content.nocancerSource }}</span>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
              <div
                class="expand-all"
                style="margin-bottom: 20px; margin-left: 27px"
              >
                <div class="expand-title">致癌健康信息</div>
                <div class="my-table">
                  <table width="1000">
                    <tr>
                      <th>IUR(ug/m³)</th>
                      <th>来源</th>
                    </tr>
                    <tr
                      v-if="!props.row.healthList[0]"
                      :key="props.row.healthList + '111'"
                    >
                      <td colspan="5">暂无数据</td>
                    </tr>
                    <tr
                      v-for="(contentt, a) in props.row.healthList"
                      :key="a + '213213'"
                    >
                      <td>
                        <!-- <span>{{ contentt.iur }}</span> -->
                        <span v-html="converting(contentt.iur)"></span>
                      </td>
                      <td>
                        <span>{{ contentt.cancerSource }}</span>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="高尚堡联合站（冀东油田）" prop="cf"></el-table-column>
          <el-table-column label="居民区" prop="r"></el-table-column>
          <el-table-column label="对照区" prop="ca"></el-table-column>
          <el-table-column label="总平均浓度" prop="avg"></el-table-column>
          <el-table-column label="类别" prop="target"></el-table-column>
          <el-table-column label="数据来源" prop="refText">
            <!-- 网站转跳 -->
            <template slot-scope="scope">
              <a :href="scope.row.refLink" target="_blank">{{
                scope.row.refText
              }}</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  </div>

</template>

<script>
import { getOilData } from "@/api/publicSearch";
import { formatting,converting } from "@/api/formatVoc";
import asideTabs from "@/components/AsideTabs"
export default {
  name: "OilView",
  components:{asideTabs},
  data() {
    return {
      tableData: [],
      searchVocDetails: "",
      vocId: "",
      vocNext: "",
      path: 'oil'
    };
  },
  mounted() {
    this.vocId = this.$route.query.vocId;
    this.searchVocDetails = this.$route.query.searchVocDetails;
    this.vocNext = this.$route.query.vocNext;
    this.loading = true;
    getOilData(this.vocId).then((res) => {
      this.tableData = res.data.data;
      this.loading = false;
    });
  },
  methods: {
    //链接中跳转函数
    gotoNewpage(str, radio) {
      let path = str;
      //设置同一个大气和催化反应转换
      this.radio = radio;
      this.$router.push({
        path: path,
        query: {
          searchVocDetails: this.searchVocDetails,
          vocId: this.vocId,
          radio: this.radio,
          vocNext: this.vocNext,
        },
      });
    },
    //格式化处理
    formatting(str) {
      return formatting(str);
    },
    //上标处理
    converting(str){
      return converting(str);
    }
  },
};
</script>

<style scoped lang="scss">
@import "../css/common.scss";
.coking {
  width: 90%;
  .coking-content {
    margin-left: 0 auto;

  }
  .bacteria-title {
    text-align: left;
  }
  .title {
    font-size: 20px;
  }
  .table {
    margin-top: 10px;
  }
  .small {
    // text-align: left;
    font-size: 10px;
    vertical-align: super;
  }
  .contentp {
    font-style: 19px;
  }
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.contentp {
  font-style: 19px;
}
.my-table {
  // width: 100%;
  // position: relative;
  // top: -40px;
  margin-left: 55px;
  text-align: left;
}
.my-table > table {
  margin: auto;
  margin-top: 10px;
  td {
    height: #{$second_line_height}px;
    text-align: center;
  }
  th {
    // 里面的表头高度
    width: 20%;
    // height: 20px;
    text-align: center;
    padding: #{$second_table_height}px;
    // font-size: #{$third_font_size};
  }
}
.expand-title {
  text-align: left;
  margin-top: 12px;
  // font-size: 30px;
  font-size: #{$third_font_size};
  margin-bottom: 20px;
  margin-left: 60px;
  font-weight: 550;
  color: #606266;
}
.et-p {
  text-align: center;
  // margin: 0 auto;
  margin-bottom: 20px;
}
.expand-all {
  text-align: left;
  width: 1300px;
  margin-left: 10px;
  display: flex;
  justify-content: stretch;
  margin-bottom: 5px;
}
.page-title p {
  text-align: left;
  font-size: #{$first_font_size};
  font-weight: #{$first_font_weight};
  margin-top: #{$first_titile_top}px;
  margin-left: #{$first_titile_left}px;
  margin-bottom: #{$first_titile_bottom}px;
}
table {
  border-collapse: collapse;
  padding: 2px;
}
table,
table tr th,
table tr td {
  border-bottom: 1px solid #eef1f6;
}
table tr th {
  background-color: #eef1f6;
}
.content {
  text-align: left;
  font-size: #{$second_font_size};
  font-weight: #{$second_font_weight};
  margin-top: #{$second_titile_top}px;
  margin-left: #{$second_titile_left}px;
  margin-bottom: #{$second_titile_bottom}px;
}
.my-table-p {
  margin-left: 100px;
  width: 1000px;
  // font-size: #{$third_font_size};
}
.mt-p {
  text-align: center;
  font-size: 17px;
}
//.bacteria .bacteria-content .content .el-table .el-table--enable-row-hover .el-table__body tr:hover > td {
//    background-color: #92cbf1;
// }
// .el-table__row tr:hover > td {
//    background-color: #92cbf1;
// }
// tbody>tr :hover{
//   color: blue !important;;
// }
// .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td {
//     color: #fff;
//     background-color: #a2a4a7!important;
// }
// tr[class^="el-table__row"]:hover {
//     color: blue;
//   }
// td:hover {
//   color: blue;
// }
// 表头高度修改
::v-deep .el-table__header tr,
::v-deep .el-table__header th {
  // height: 10px;
  padding: #{$first_table_height}px;
}
//相关链接
.link-ul li {
  list-style-type: square;
  width: 90%;
  text-align: left;
  color: rgba(0, 84, 190, 1);
  font-size: #{$third_font_size};
  font-weight: #{$third_font_weight};
  margin-top: #{$third_titile_top}px;
  margin-left: #{$third_titile_left}px;
  margin-bottom: #{$third_titile_bottom}px;
  cursor: pointer;
}
.link-title {
  text-align: left;
  font-size: #{$first_font_size};
  font-weight: #{$first_font_weight};
  margin-top: #{$first_titile_top}px;
  margin-left: #{$first_titile_left}px;
  margin-bottom: #{$first_titile_bottom}px;
}
// 表头高度修改结束
a:visited {
    color: rgba(0, 84, 190, 1);
  }
  a:link {
    color: rgba(0, 84, 190, 1); /* 修改未访问链接的颜色为蓝色 */
    text-decoration: none; /* 移除下划线 */
  }
</style>